// 设置页面
import { Button, Tab } from '@kedacom/react-next'
// import ProfileView from './components/profile'
import PwdView from './components/pwd'
import PINView from './components/pin'
import IPView from './components/address'
import { StyledSet } from './style'
// import FooterView from '@/components/Footer'
import useIndexHook from './servers/indexServer'
import { Route, Routes } from 'react-router-dom'
import { UpdateAddressFormDataProps } from '@/components/UpdateAddress/interface'
import UpdateAddressView from '@/components/UpdateAddress'

const SetView = () => {
	const { ..._useHook } = useIndexHook()
	const isPwdTab = _useHook.tabValue === '/set/password'
	return (
		<>
			<StyledSet className="set-wrap">
				<div className="header-wrap">
					<div className="tab-wrap">
						<Tab
							type="button"
							labelField={'text'}
							valueField={'value'}
							className="tab-con"
							data={_useHook.tabData}
							value={_useHook.tabValue}
							onChange={(e, v, checkedItem: any) => _useHook.onTabClick(checkedItem)}
						/>
						{isPwdTab ? (
							<span className="tip-pwd">
								{_useHook.passwordStrength === 2 && '密码等级应为中或者强'}
								{_useHook.passwordStrength === 3 && '密码等级应为强'}
							</span>
						) : null}
					</div>
					{_useHook.tabValue !== '/set/ip' ? (
						<div className="btn-wrap">
							<Button className="btn" disabled={_useHook.saveDisabled} onClick={_useHook.onSave}>
								保存
							</Button>
							<Button onClick={_useHook.onCancel}>取消</Button>
						</div>
					) : null}
				</div>

				<div className="content">
					<Routes>
						{/* <Route
							path="/profile"
							element={
								<ProfileView
									ref={_useHook.profileRef}
									profileInfo={_useHook.profileInfo}
									reloadProfileData={_useHook.reloadProfileData}
								/>
							}
						/> */}
						<Route
							path="/password"
							element={
								<PwdView
									ref={_useHook.pwdRef}
									isShowRememberNewPwd={_useHook.isShowRememberNewPwd}
									onChange={(formData) => _useHook.onUpdatePwdChange(formData)}
									strength={_useHook.passwordStrength}
								/>
							}
						/>
						<Route
							path="/ip"
							element={
								// <IPView
								// 	ref={_useHook.ipRef}
								// 	formData={_useHook.addressFormData}
								// 	onChange={(formData: UpdateAddressFormDataProps[]) =>
								// 		_useHook.onUpdateIPChange(formData)
								// 	}
								// 	newFormData={_useHook.newAddressFormData}
								// />
								<UpdateAddressView
									// ref={_useHook.ipRef}
									receiveAddress={_useHook.addressFormData}
									selectAddress={_useHook.selectAddress}
									// onChange={(formData: UpdateAddressFormDataProps[]) => _useHook.onChange(formData)}
								/>
							}
						/>
						<Route
							path="/pin"
							element={
								<PINView
									ref={_useHook.pinRef}
									onChange={(formData) => _useHook.onUpdatePINChange(formData)}
								/>
							}
						/>
					</Routes>
				</div>
				{/* <FooterView /> */}
			</StyledSet>
		</>
	)
}

export default SetView
